<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="container">
        <div class="point"></div>
        <div class="point"></div>
        <div class="point"></div>
        <div class="point"></div>
        <div class="point"></div>
        <div class="point"></div>
        <div class="point"></div>
        <div class="point"></div>
        <div class="point"></div>
    </div>
</body>

</html>
<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    body {
        height: 100vh;
        background-color: #34495e;
    }

    .container {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border: 2px solid #3498db;
        border-radius: 50%;
    }

    .point {
        width: 100px;
        height: 100px;
        margin: 10px;
        display: inline-block;
        background-color: #9b59b6;
        border-radius: 50%;
        animation: zoom 1.5s infinite alternate;
    }

    .point:nth-child(2) {
        animation-delay: 0.5s;
    }

    .point:nth-child(3) {
        animation-delay: 1s;
    }

    .point:nth-child(4) {
        animation-delay: 1.5s;
    }

    .point:nth-child(5) {
        animation-delay: 2s;
    }

    .point:nth-child(6) {
        animation-delay: 2.5s;
    }

    .point:nth-child(7) {
        animation-delay: 3s;
    }

    .point:nth-child(8) {
        animation-delay: 3.5s;
    }

    .point:nth-child(9) {
        animation-delay: 4s;
    }

    @keyframes zoom {
        0% {
            width: 100px;
            height: 100px;
        }

        50% {
            height: 5px;
            width: 5px;
        }

        100% {
            width: 100%;
            height: 100%;
        }
    }
</style>
<script></script>